<template>
    <!-- 标签栏 -->
    <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o" to="/">
            首页
        </van-tabbar-item>
        <van-tabbar-item name="star" icon="star-o" to="/star">
            收藏
        </van-tabbar-item>
        <van-tabbar-item name="basket" icon="cart-o" :badge="basketBadge" to="/basket">
            我的菜篮
        </van-tabbar-item>
        <!-- <van-tabbar-item name="mine" icon="contact-o" to="/mine">
            我的
        </van-tabbar-item> -->
    </van-tabbar>
</template>

<script setup lang="ts">
import {useBasketStore} from '@/stores/basket.ts'

const props = defineProps(['active'])
const active = ref(props.active)

// 当组件被缓存时才会调用该函数
onActivated(() => {
    active.value = props.active
})

const basketStore = useBasketStore()

// 篮子里面的数量
const basketBadge = computed((): string => {
    return basketStore.size()
})

</script>

<style scoped></style>